// 弹窗
<template>
  <div>
    <!-- 遮盖层 -->
    <div v-show="visible" :value="value" class="mod">
      <!-- 遮盖层显示后的表格区域 -->
      <div class="mod_body">
        <!-- “ × ” 号 -->
        <div v-if="useClose" class="close" @click="cancel"><img src="@/assets/images/close_icon.png" alt="" /></div>
        <!-- 标题 -->
        <div class="mod_title" v-if="title">{{ title }}</div>
        <!-- 表格内容 -->
        <div class="slot"><slot /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  //   参数数组
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 是否出现关闭按钮  默认出现
    useClose: {
      type: Boolean,
      default: true
    },
    //标题
    title: {
      type: String
    }
  },
  data() {
    return {
      // 是否显示遮盖层标识
      visible: false,
      scrollTop: 0
    };
  },
  //   监听滚动出去的距离
  watch: {
    value(val) {
      // 如果val 存在 就显示  不存在 就隐藏
      this.visible = val;
      const body = window.document.body;
      //   val 存在也就是显示遮盖层的情况下让当前的body 一直处于当前浏览器可视区域
      if (val) {
        this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        body.style.position = 'fixed';
        body.style.width = '100%';
        body.style.top = -this.scrollTop + 'px';
      } else {
        body.style.position = 'relative';
        body.style.top = 0;
        document.body.scrollTop = this.scrollTop;
      }
    },
    // 把事件源绑定在input 事件上
    visible(val) {
      this.$emit('input', val);
    }
  },
  mounted() {
    if (this.value) {
      this.visible = true;
    }
  },
  methods: {
    // 点击×号 关闭遮盖层
    cancel() {
      this.visible = false;
    }
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
// 遮盖层
.mod {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.73);
  z-index: 999;

  //   遮盖中显示表格区域样式
  .mod_body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    width: 30%;
    height: auto;
    background-color: #fff;
    padding-bottom: 20px;

    // × 号的样式
    .close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 30px;
      height: 30px;
      // border: 1px solid #999;
      // border-radius: 50%;
      text-align: center;
      line-height: 30px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }

    .slot {
      padding: 0 20px;
      height: auto;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .mod_title {
    font-size: 16px;
    color: #4a4a4a;
    text-align: center;
    line-height: 23px;
    padding: 38px 25px 0 25px;
  }
}
</style>
